<template>
	<div class="box-list">
		<div class="box" v-for="(item, index) in list" :key="index">
			<div class="box-top">
				<div v-show="item.title">{{ item.title }}：</div>
				<el-tooltip class="box-top-icon" effect="dark" :content="item.tip" placement="top">
					<i v-if="item.icon" class="el-icon-question"></i>
				</el-tooltip>
			</div>
			<div class="box-price">
				<!-- <span>￥</span> -->
				{{ item.price || '0' }}
			</div>
			<div v-show="item.bottomTitle && !item.bottom" class="box-bottom">
				{{ item.bottomTitle }}：{{ item.bottomNum || '0' }}
				<el-tooltip
					class="box-failuretip-icon"
					effect="dark"
					v-show="item.failureTip"
					:content="item.failureTip"
					placement="top"
				>
					<div>
						<i class="el-icon-warning-outline"></i>
					</div>
				</el-tooltip>
			</div>
			<div class="line" v-if="index != list.length - 1"></div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		data: Object
	},

	data() {
		return {
			list: [
				{
					title: '微信号总数',
					icon: false,
					price: 0,
					tip: '所有微信号之和'
				},
				{
					title: '有效佣金',
					icon: true,
					price: 0,
					bottomTitle: '有效单数',
					bottomNum: 0,
					tip: '有效佣金 + 失效佣金的 付款预估收入之和'
				},
				{
					title: '粉丝总数',
					icon: false,
					price: 0,
					bottomTitle: '新增粉丝',
					bottomNum: 0,
					tip: '已付款状态订单的 付款预估收入之和'
				},
				{
					title: 'A类总数',
					icon: false,
					price: 0,
					bottomTitle: '新增A类',
					bottomNum: 0,
					tip: '已结算状态订单的 付款预估收入之和'
				},
				{
					title: '裂变人数',
					icon: false,
					price: 0,
					bottomTitle: '失效订单',
					bottom: true,
					bottomNum: 0,
					tip: '超时未付款和退款订单的 付款预估收入之和',
					failureTip: '失效订单数'
				}
			]
		};
	},

	mounted() {},

	methods: {
		refresh(data) {
			const {
				wechatNum,
				validCommission,
				validOrderNum,
				fansNum,
				newFansNum,
				aTypeNum,
				newATypeNum,
				fissionNum
			} = data;

			this.list[0].price = wechatNum;
			this.list[1].price = validCommission.toFixed(2);
			this.list[2].price = fansNum;
			this.list[3].price = aTypeNum;
			this.list[4].price = fissionNum;

			this.list[1].bottomNum = validOrderNum;
			this.list[2].bottomNum = newFansNum;
			this.list[3].bottomNum = newATypeNum;
		}
	}
};
</script>

<style lang="stylus" scoped>
.box-list {
	display: flex;
	background-color: #fff;
	// padding: 20px 0 20px 0;
	// border-top: solid 16px #F0F0F7;
	// border-bottom: solid 16px #F0F0F7;
	font-size: 14px;
	color: #606266;
	height: 152px;
	width: 100%;
	box-sizing: content-box;

	.box {
		flex: 1;
		display: flex;
		flex-direction: column;
		line-height: 1.8;
		padding: 8px 20px 12px 20px;
		position relative
		.line {
			width:1px;
			height:75px;
			background rgba(208,208,208,1);
			position absolute
			right 0
			top 50%
			margin-top -37.5px
		}
		&:last-child {
			border-right: 0;
		}

		.box-top {
			display: flex;
			align-items: center;
			position: relative;
			color: rgba(0, 0, 0, 0.45);
			margin-top 20px
			.box-top-icon {
				position: absolute;
				font-size 16px
				right: 4px;
			}
		}

		.box-price {
			color: #FD5822;
			font-size: 18px;
			margin-top 6px
			span {
				font-size: 14px;
			}
		}

		.box-bottom {
			display: flex;
			margin-top 3px
			.box-failuretip-icon {
				margin-left: 10px;
			}
		}
	}
}
</style>
